import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core';

@Component({
  selector: 'app-scatter-aqi-chart',
  templateUrl: './scatter-aqi-chart.component.html',
  styleUrls: ['./scatter-aqi-chart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ScatterAqiChartComponent implements OnChanges {
  @Input() dataSeries;
  @Input() givenHeight = '400px';
  @Input() givenXAxisNumber = 8;
  @Input() givenYAxisNumber = 7;
  @Input() givenXAxis;
  @Input() givenYAxis;
  @Input() givenType = '攻击次数';
  options = {};
  getHeight() {
    return this.givenHeight;
  }
  constructor() { }
  ngOnChanges(): void {
    if (this.givenType === '攻击次数') {
      this.options = {
        color: [
          '#dd4444', '#fec42c', '#80F1BE'
        ],
        tooltip: {
          padding: 10,
          backgroundColor: '#222',
          borderColor: '#777',
          borderWidth: 1,
          formatter: function (params) {
            return '目标: ' + params.seriesName + '<br/>' + '攻击次数: ' + params.data[2];
          }
        },
        xAxis: {
          type: 'value',
          name: this.givenXAxis,
          nameGap: 16,
          nameTextStyle: {
            fontSize: 7
          },
          max: this.givenXAxisNumber,
          splitLine: {
            show: false
          },
        },
        yAxis: {
          type: 'value',
          name: this.givenYAxis,
          nameLocation: 'end',
          nameGap: 20,
          nameTextStyle: {
            fontSize: 10
          },
          max: this.givenYAxisNumber,
          splitLine: {
            show: false
          }
        },
        visualMap: [
          {
            left: 'right',
            top: '-100%',
            dimension: 2,
            textStyle: {
              color: '#fff'
            },
            inRange: {
              symbolSize: [20, 400]
            },
            outOfRange: {
              symbolSize: [40, 120],
              color: ['rgba(255,255,255,.2)']
            },
          },
        ],
        series: this.dataSeries
      };
    }

  }
}
